<template>
  <div class="pbox">
    <Box title="煤炭仓储量/销量">
      <div class="content">
        <div
          v-for="item in btnArr"
          :class="'son' + ' ' + item.class + '_' + item.checked.toString()"
          @click="btnFn(item)"
        >
          <div class="top1">
            <div :class="'nums_'+item.checked.toString()">{{ item.num }}</div>
            <div class="dw">单位：万吨</div>
          </div>
          <div class="content1">{{ item.text }}</div>
        </div>
      </div>
    </Box>
  </div>
</template>
<script setup>
import Box from "@/components/Box/index.vue";

import { reactive, ref } from "vue";
const btnArr = reactive([
  {
    class: "cl",
    text: "煤炭储量",
    checked: true,
    num: 70,
  },
  {
    class: "xl",
    text: "煤炭销量",
    checked: false,
    num: 80,
  },
]);

function btnFn(item) {
  // 将其他按钮设置成false
  btnArr.forEach((element) => {
    element.checked = false;
  });
  item.checked = true;
}
</script>
<style scoped>
.pbox {
  width: 100%;
  flex: 1;
}
.rightBtn {
  display: flex;
  gap: 10px;
}
.content {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  /* background-image: url(/layout/nei.png);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat; */
}

.cl_true {
  background-image: url(/layout/chu1.png);
}
.cl_false {
  background-image: url(/layout/chu.png);
}

.xl_true {
  background-image: url(/layout/xiao.png);
}
.xl_false {
  background-image: url(/layout/xiao1.png);
}
.son {
  flex: 1;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.top1 {
  flex: 1;
  width: 100px;
  background-image: url(/layout/juzhong.png);
  background-position: bottom;
  background-size: contain;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: end;
}
.content1 {
  height: 40px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
}
.dw {
  margin-bottom: 28px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10px;
  color: aqua;
}

.nums_false {
  font-size: 30px;
  background-image: linear-gradient(to bottom, #6e9fae, #117693);
  -webkit-background-clip: text;
  color: transparent;
  font-weight: bold;
}

.nums_true {
  font-size: 30px;
  background-image: linear-gradient(to bottom, #fff, #FAE81F);
  -webkit-background-clip: text;
  color: transparent;
  font-weight: bold;
}
</style>
